<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PWA Website: you are offline</title>

<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/css/styles.css">

<link rel="manifest" href="/manifest.json">

<meta name="theme-color" content="#ace">
<link rel="icon" sizes="192x192" href="/images/logo/logo192.png">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="/images/logo/logo192.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/images/logo/logo180.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/images/logo/logo152.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/logo/logo072.png">
<link rel="shortcut icon" href="/images/logo/logo016.png">
<link rel="shortcut icon" href="/favicon.ico">

<meta name="application-name" content="PWA Website">
<meta name="description" content="This is a demonstration website which uses Progressive Web App technologies to provide offline functionality.">
<meta name="keywords" content="website, pwa, offline">
<meta name="author" content="Craig Buckler">
<meta name="robots" content="noindex, nofollow">

</head>
<body>

<!-- header -->
<header>

  <!-- logo -->
  <a href="/" class="logo"><img src="/images/logo/logo152.png" alt="PWA"></a>

</header>

<!-- content -->
<main>
<article>

  <figure data-href="/images/hero/power-lo.jpg" data-srcset="/images/hero/power-lo.jpg 600w, /images/hero/power-hi.jpg 1200w" class="primary progressive replace">
    <img src="/images/hero/power-pv.jpg" class="preview" alt="enable switch" />
  </figure>

  <h1>Sorry &ndash; you're offline!</h1>

  <p>Please connect to access this page. Otherwise, choose a page which is available to read offline:</p>

  <ul id="cachedpagelist"></ul>

</article>
</main>

<!-- footer -->
<footer>
  <p>&copy;NOW</p>
  <p>All rights reserved.</p>
  <p>We don't track you or do anything nasty. Or so we say.</p>
  <p>Nothing to see here. Please move along.</p>
</footer>

<!-- menu link -->
<div id="menu"><a href="#nav">menu</a></div>

<!-- navigation -->
<nav id="nav">
  <ul>
    <li><a href="#menu" title="close menu" class="close">&#x2715;</a></li>
    <li><a href="/" class="active nav">home</a></li>
    <li><a href="/work/" class="nav">work</a></li>
    <li><a href="/about/" class="nav">about</a></li>
    <li><a href="/contact/" class="nav">contact</a></li>
  </ul>
</nav>

<script src="/js/main.js" defer></script>
</body>
</html>
